<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>Admin Module - {{ config('app.name', 'Laravel') }}</title>

        <meta name="description" content="{{ $description ?? '管理后台系统' }}">
        <meta name="keywords" content="{{ $keywords ?? 'laravel,admin,dashboard' }}">
        <meta name="author" content="{{ $author ?? 'Laravel Admin' }}">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Layui CSS -->
        <link rel="stylesheet" href="{{ asset('layui/css/layui.css') }}">

        <!-- Tailwind CSS -->
        <script src="https://cdn.tailwindcss.com"></script>
        
        <!-- Alpine.js -->
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

        <!-- Layui JS -->
        <script src="{{ asset('layui/layui.js') }}"></script>

        <!-- jQuery -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

        {{-- Vite CSS --}}
        {{-- {{ module_vite('build-admin', 'resources/assets/sass/app.scss') }} --}}

        <style>
            [x-cloak] { display: none !important; }
            .admin-layout {
                display: flex;
                min-height: 100vh;
            }
            .icon-sidebar {
                width: 60px;
                min-width: 60px;
                background-color: #1D1E23;
                z-index: 1000;
            }
            .main-sidebar {
                width: 200px;
                min-width: 200px;
                background-color: #20222A;
                z-index: 900;
            }
            .content-area {
                flex: 1;
                background-color: #F2F2F2;
                position: relative;
            }
            .page-loading {
                position: fixed;
                top: 0;
                left: 260px; /* 60px + 200px (图标侧边栏 + 主侧边栏) */
                right: 0;
                bottom: 0;
                background-color: rgba(255, 255, 255, 0.6);
                display: none;
                z-index: 1000;
            }
            .loading-spinner {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 50px;
                height: 50px;
                border: 5px solid #f3f3f3;
                border-top: 5px solid #1E9FFF;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                0% { transform: translate(-50%, -50%) rotate(0deg); }
                100% { transform: translate(-50%, -50%) rotate(360deg); }
            }
        </style>
    </head>

    <body class="font-sans antialiased">
        <div class="admin-layout">
            <!-- 左侧图标边栏 -->
            <div class="icon-sidebar flex flex-col items-center border-r border-gray-700">
                <!-- 顶部Logo -->
                <div class="p-4 flex justify-center">
                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
                        L
                    </div>
                </div>
                
                <div class="flex-1 w-full">
                    <!-- 模块图标菜单 -->
                    <div class="mt-4 flex flex-col items-center gap-4">
                        @php
                            $moduleStatuses = json_decode(file_get_contents(base_path('modules_statuses.json')), true);
                            $enabledModules = array_filter($moduleStatuses, function($enabled) {
                                return $enabled === true;
                            });
                            
                            // 获取模块详细信息
                            $modulesInfo = [];
                            foreach(array_keys($enabledModules) as $moduleName) {
                                $modulePath = base_path('Modules/' . $moduleName);
                                $moduleJsonPath = $modulePath . '/module.json';
                                
                                if (file_exists($moduleJsonPath)) {
                                    $moduleData = json_decode(file_get_contents($moduleJsonPath), true);
                                    $modulesInfo[$moduleName] = $moduleData;
                                }
                            }
                        @endphp
                        <div>
                            <a href="{{ route('admin.components.index') }}" class="module-link">
                                <div class="w-10 h-10 flex items-center justify-center rounded-md hover:bg-gray-700 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                    </svg>
                                </div>
                            </a>
                        </div>
                        @foreach($modulesInfo as $moduleName => $moduleInfo)
                            <div x-data="{ tooltip: false }" class="relative">
                                <a href="@php
                                    try {
                                        if ($moduleName == 'Admin') {
                                            echo route('admin.index');
                                        } else {
                                            echo route('admin.'.strtolower($moduleName).'.index');
                                        }
                                    } catch (\Exception $e) {
                                        echo '#';
                                    }
                                @endphp" 
                                   class="module-link w-10 h-10 flex items-center justify-center rounded-md hover:bg-gray-700 text-white"
                                   @mouseenter="tooltip = true" @mouseleave="tooltip = false">
                                    @if(isset($moduleInfo['icon']) && !empty($moduleInfo['icon']))
                                        <div class="w-6 h-6 text-white">
                                            {!! file_get_contents(public_path(ltrim($moduleInfo['icon'], '/'))) !!}
                                        </div>
                                    @else
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                        </svg>
                                    @endif
                                </a>
                                
                                <!-- 悬停提示 -->
                                <div x-show="tooltip" 
                                     x-transition:enter="transition ease-out duration-300"
                                     x-transition:enter-start="opacity-0 transform translate-x-2"
                                     x-transition:enter-end="opacity-100 transform translate-x-0"
                                     class="absolute left-14 top-0 w-auto px-3 py-2 bg-gray-900 text-white text-sm rounded shadow-lg whitespace-nowrap z-10">
                                    {{ $moduleInfo['name'] }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                
                <!-- 底部设置按钮 -->
                <div class="mb-6 flex flex-col items-center gap-4">
                    <div x-data="{ tooltip: false }" class="relative">
                        <a href="#" 
                           class="w-10 h-10 flex items-center justify-center rounded-md hover:bg-gray-700 text-white"
                           @mouseenter="tooltip = true" @mouseleave="tooltip = false">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </a>
                        <div x-show="tooltip" 
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 transform translate-x-2"
                             x-transition:enter-end="opacity-100 transform translate-x-0"
                             class="absolute left-14 top-0 w-auto px-3 py-2 bg-gray-900 text-white text-sm rounded shadow-lg whitespace-nowrap z-10">
                            设置
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主菜单侧边栏 -->
            <div class="main-sidebar">
                <x-admin-menu></x-admin-menu>
            </div>

            <!-- 右侧内容区 -->
            <div class="content-area">
                <!-- 加载动画 -->
                <div class="page-loading" id="pageLoading">
                    <div class="loading-spinner"></div>
                </div>
                
                <main>
                    {{ $slot }}
                </main>
            </div>
        </div>

        <script>
            // 初始化Layui
            layui.use(['layer', 'form', 'element'], function(){
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
                
                // 可以在这里添加Layui的初始化代码
                console.log('Layui initialized');
            });
            
            // 页面加载效果
            $(document).ready(function() {
                // 给所有菜单链接添加点击事件
                $('.layui-nav a:not([href="#"]), .module-link, .menu-link').on('click', function(e) {
                    // 如果是锚点链接或者按住了ctrl键，不显示加载效果
                    if ($(this).attr('href') === '#' || e.ctrlKey || e.metaKey) {
                        return;
                    }
                    
                    // 显示加载动画
                    $('#pageLoading').fadeIn(200);
                    
                    // 如果3秒后还没有跳转完成，则隐藏加载动画（防止加载失败时一直显示）
                    setTimeout(function() {
                        $('#pageLoading').fadeOut(200);
                    }, 3000);
                });
                
                // 页面加载完成后隐藏加载动画
                $(window).on('load', function() {
                    $('#pageLoading').fadeOut(200);
                });
            });
        </script>

        {{-- Vite JS --}}
        {{-- {{ module_vite('build-admin', 'resources/assets/js/app.js') }} --}}
    </body>
</html>
